<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-06-11 18:09:29
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-06-27 16:47:43
 * @FilePath: \cip-mobile\src\pages\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 创建单位页 -->
<script lang="ts" setup>
import type { FireInspectionPerson } from '@/genapi/fireProduct';
import { fireProductFireApiInspectionPersonJobQuerybyPost } from '@/genapi/fireProduct';
import { whManagerBsTbRiskHazardsSpecialSaveOrUpdateUsingPost } from '@/genapi/wh';
import { useUserStore } from '@/stores/user';
defineOptions({ name: 'CreateTask' });
const userStore = useUserStore();

const router = useRouter();

const dialogVisible1 = ref(false);
const dialogVisible2 = ref(false);
const show = ref(false)
const show2 = ref(false)
const back = () => {
	dialogVisible1.value = false;
	router.replace({ path: '/home' });
};
const val = ref('')
const val2 = ref('')

const submit = async () => {
  form.value.handleTime += ' 00:00:00'
  form.value.reportTime += ' 00:00:00'
  // console.log(form.value)
  let res = await whManagerBsTbRiskHazardsSpecialSaveOrUpdateUsingPost(form.value)
  console.log(res)
	dialogVisible2.value = false;
	router.replace({ path: '/home' });
};
const rules = ref({
	name: [{ required: true, message: '请填写作业名称' }],
	type: [{ required: true, message: '请选择作业类型' }],
	location: [{ required: true, message: '请输入区域地点' }],
	reportTime: [{ required: true, message: '请填写上报时间' }],
	work: [{ required: true, message: '请填写现场作业人' }],
	workTime: [{ required: true, message: '请填写实施时间' }],
	response: [{ required: true, message: '请填写作业负责人' }],
	safety: [{ required: true, message: '请填写主要安全措施' }],
	check: [{ required: true, message: '请填写验收人员' }],
	status: [{ required: true, message: '请选择作业状态' }],
});

const form = ref({
	taskUnit: '',
	taskType: '',
	location: '',
	reportTime: '',
	sceneMaster: '',
	handleTime: '',
	taskMaster: '',
	handleDesc: '',
	acceptance: '',
  taskStatus: '',
  taskName:''
	// status: '',
});

const unitColumns1 = ref([
	{ text: '动火作业', value: '1' },
	{ text: '受限空间作业', value: '2' },
	{ text: '盲板抽堵作业', value: '3' },
	{ text: '高处作业', value: '4' },
	{ text: '吊装作业', value: '5' },
	{ text: '临时用电作业', value: '6' },
	{ text: '动图作业', value: '7' },
	{ text: '断路作业', value: '8' },
]);

const unitColumns2 = ref([
	{ text: '待施工', value: '1' },
	{ text: '施工中', value: '2' },
	{ text: '已验收', value: '3' },
]);

const showPopup1 = ref(false);
const showPopup2 = ref(false);

const confirm = ({ selectedValue, selectedOptions }, title) => {
	form.value[title] = selectedValue[0];
	showPopup1.value = false;
	showPopup2.value = false;
};

const confirm2 = ({ selectedValue }, title) => {
  form.value[title] = selectedValue.join('-')
  show.value = false
  show2.value = false
}

const type = computed(() => {
	const res = unitColumns1.value.find((item) => {
		return item.value === form.value.taskType;
	});
	return res?.text;
});

const status = computed(() => {
	const res = unitColumns2.value.find((item) => {
		return item.value === form.value.taskStatus;
	});
	return res?.text;
});
</script>

<template>
	<div class="createTaskPage">
		<nut-navbar title="特殊作业报备" left-show @click-back="dialogVisible1 = true" />
		<nut-dialog
			teleport="#app"
			title="退出编辑"
			content="确认要退出编辑吗？"
			v-model:visible="dialogVisible1"
			:onOk="back"
		/>
		<div class="taskContent">
			<nut-form :model-value="form" :rules="rules">
				<nut-form-item>
					<div class="basedata-form-title">作业信息</div>
				</nut-form-item>
				<nut-form-item prop="name" label="作业名称">
					<nut-input v-model="form.taskName" placeholder="请输入" type="text" />
				</nut-form-item>
				<nut-form-item prop="type" label="作业类型">
					<div class="selector-box" @click="showPopup1 = true">
						<span>{{ type? type:'请选择' }}</span><IconFont name="rect-right" color="#a9a7a7" />
					</div>
					<nut-popup v-model:visible="showPopup1" position="bottom">
						<nut-picker
							@confirm="(params) => confirm(params, 'taskType')"
							:columns="unitColumns1"
							title="请选择作业类型"
							@cancel="showPopup1 = false"
						/>
					</nut-popup>
				</nut-form-item>
				<nut-form-item prop="location" label="区域地点">
					<nut-input v-model="form.location" placeholder="请输入" type="text" />
				</nut-form-item>
				<nut-form-item prop="reportTime" label="上报时间">
					<!-- <nut-input v-model="form.reportTime" placeholder="请输入" type="text" /> -->
          <div class="selector-box" @click="show = true">
						<span>{{form.reportTime? form.reportTime:'请选择'}}</span><IconFont name="rect-right" color="#a9a7a7" />
					</div>
          <nut-popup v-model:visible="show" position="bottom">
            <nut-date-picker
              v-model="val"
              :three-dimensional="false"
              @confirm="(params) => confirm2(params, 'reportTime')"
              @cancel="show = false"
            ></nut-date-picker>
          </nut-popup>
				</nut-form-item>
				<nut-form-item prop="work" label="现场作业人">
					<nut-input v-model="form.sceneMaster" placeholder="请输入" type="text" />
				</nut-form-item>
				<nut-form-item prop="workTime" label="实施时间">
					<div class="selector-box" @click="show2 = true">
						<span>{{form.handleTime? form.handleTime:'请选择'}}</span><IconFont name="rect-right" color="#a9a7a7" />
					</div>
          <nut-popup v-model:visible="show2" position="bottom">
            <nut-date-picker
              v-model="val2"
              :three-dimensional="false"
               @confirm="(params) => confirm2(params, 'handleTime')"
              @cancel="show2 = false"
            ></nut-date-picker>
          </nut-popup>
				</nut-form-item>
				<nut-form-item prop="response" label="作业负责人">
					<nut-input v-model="form.taskMaster" placeholder="请输入" type="text" />
				</nut-form-item>
				<nut-form-item prop="safety" label="主要安全措施" label-position="top">
					<nut-textarea
						v-model="form.handleDesc"
						placeholder="请输入"
						:autosize="true"
						:rows="4"
						style="background-color: #c2bebe2e; padding: 10px !important"
					/>
				</nut-form-item>
				<nut-form-item>
					<div class="basedata-form-title">作业状态</div>
				</nut-form-item>
				<nut-form-item prop="check" label="验收人员">
					<nut-input v-model="form.acceptance" placeholder="请输入" type="text" />
				</nut-form-item>
				<nut-form-item prop="status" label="作业状态">
					<div class="selector-box" @click="showPopup2 = true">
						<span>{{ status? status:'请选择' }}</span
						><IconFont name="rect-right" color="#a9a7a7" />
					</div>
					<nut-popup v-model:visible="showPopup2" position="bottom">
						<nut-picker
							@confirm="(params) => confirm(params, 'taskStatus')"
							:columns="unitColumns2"
							title="请选择作业状态"
							@cancel="showPopup2 = false"
						/>
					</nut-popup>
				</nut-form-item>
			</nut-form>
		</div>
		<div class="taskSubmitBox">
			<nut-button type="info" @click="dialogVisible2 = true">提交</nut-button>
			<nut-dialog
				teleport="#app"
				title="提交"
				content="确认要提交吗？"
				v-model:visible="dialogVisible2"
				:onOk="submit"
			/>
		</div>
	</div>
</template>

<style scoped lang="scss">
.createTaskPage {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	--nut-button-primary-border-color: #000;
	--nut-primary-color: #165dff;
	--nut-cell-color: #000;
	--nut-cell-box-shadow: 0;
	--nut-form-item-label-font-size: 12px;
	--nut-input-border-bottom: #588bff 1px;
	--nut-checkbox-label-color: #606266;
	--nut-checkbox-label-font-size: 12px;
	--nut-primary-color: #165dff;
	--nut-input-font-size: 12px;
	--nut-navbar-title-font: 16px;
	--nut-icon-line-height: 20px;
	--nut-textarea-font: 12px;
	.taskContent {
		height: 87vh;
		overflow-y: auto;
		.nut-form {
			.nut-form-item {
				margin-bottom: 5px;
				border-bottom: 1px solid #e3e4e5;
			}
			.validity-upload-title {
				font-size: 14px;
				color: #000;
				span {
					font-size: 12px;
					color: #909399;
				}
			}
			.validity-uploader {
				margin-top: 20px;
			}
			.selector-box {
				color: #000;
				font-size: 12px;
				display: flex;
				justify-content: space-between;
				span {
					color: #929292;
				}
			}
			.basedata-form-title {
				font-size: 14px;
				font-weight: 600;
				color: #000;
			}
		}
	}
	.taskSubmitBox {
		height: 8vh;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1px solid #d0d4db;
		.nut-button {
			width: 90%;
		}
		span {
			color: #165dff;
			font-weight: 600;
		}
	}
}
</style>
